<template>
   <div id="map" class="map"></div>
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
  export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      new Map({
        layers: [
          new TileLayer({
            source: new XYZ({
                attributions: 'Copyright:© 2013 ESRI, i-cubed, GeoEye',
                url:
                  'https://services.arcgisonline.com/arcgis/rest/services/' +
                  'ESRI_Imagery_World_2D/MapServer/tile/{z}/{y}/{x}',
                maxZoom: 15,
                projection: 'EPSG:4326',
                tileSize: 512, // the tile size supported by the ArcGIS tile service
                maxResolution: 180 / 512, // Esri's tile grid fits 180 degrees on one 512 px tile
                wrapX: true,
            }),
          }),
        ],
        target: "map",
        view: new View({
            projection: "EPSG:4326",
            center: [108.25374, 27.93847],
            zoom: 2,
            minZoom: 2,
        }),
      });

      console.log("init finished");
    },
  },
};
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 750px;
}
</style>